<template>
  <van-tabs v-model:active="active">
    <van-tab title="市区人大" class="list">
      <van-row>
        <van-col span="12">
          <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzAwNzY5MDc2Ng==&scene=124#wechat_redirect">
          <van-image
            width="100"
            height="100"
            :src="ossBaseUrl + '/picture/logo/shrd.jpeg'"
          /></a><span>
          上海人大
        </span>
        </van-col>
        <van-col span="12">
          <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzUxMTM2ODU4NA==&scene=124#wechat_redirect">
            <van-image
            width="100"
            height="100"
            :src="ossBaseUrl + '/picture/logo/purd.jpeg'"
            /></a><span>
          浦东人大
        </span></van-col>
        <van-col span="12">
          <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzk0MjAwMDU2Mw==&scene=124#wechat_redirect">
          <van-image
            width="100"
            height="100"
            :src="ossBaseUrl + '/picture/logo/jard.jpeg'"
          /></a><span>
          静安人大
        </span></van-col>
        <van-col span="12">
          <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI3Nzc1NDU5NQ==&scene=124#wechat_redirect">
          <van-image
            width="100"
            height="100"
            :src="ossBaseUrl + '/picture/logo/yprd.jpeg'"
        /></a><span>
          杨浦人大
        </span></van-col>
        <van-col span="12">
          <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzU1MDgzNDI3MA==&scene=124#wechat_redirect">
          <van-image
            width="100"
            height="100"
            :src="ossBaseUrl + '/picture/logo/ptrd.jpeg'"
          /></a><span>
          普陀人大
        </span></van-col>
        <van-col span="12">
          <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzU2OTAwNjA0Mg==&scene=124#wechat_redirect">
            <van-image
            width="100"
            height="100"
            :src="ossBaseUrl + '/picture/logo/bsrd.jpeg'"
            /></a><span>
          宝山人大
        </span></van-col>
        <van-col span="12">
          <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzkyMTM0MTk5Nw==&scene=124#wechat_redirect">
            <van-image
            width="100"
            height="100"
            :src="ossBaseUrl + '/picture/logo/mhrd.jpeg'"
            /></a><span>
          闵行人大
        </span></van-col>
        <van-col span="12">
          <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI3NDk2NTk4MQ==&scene=124#wechat_redirect">
          <van-image
            width="100"
            height="100"
            :src="ossBaseUrl + '/picture/logo/jsrd.jpeg'"
          /></a><span>
          金山人大之窗
        </span></van-col>
        <van-col span="12">
          <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzUzMzczMzE0Mw==&scene=124#wechat_redirect">
          <van-image
            width="100"
            height="100"
            :src="ossBaseUrl + '/picture/logo/sjrd.jpeg'"
          /></a><span>
          松江人大
        </span></van-col>
        <van-col span="12">
          <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg4MTAyMDU4Mg==&scene=124#wechat_redirect">
          <van-image
            width="100"
            height="100"
            :src="ossBaseUrl + '/picture/logo/fxrd.jpeg'"
          /></a><span>
          奉贤人大
        </span></van-col>
      </van-row>
    </van-tab>
    <van-tab title="黄浦门户"  class="list">
      <van-row>
        <van-col span="12">
          <a href="http://rd.huangpuqu.sh.cn/website/html/shprd/portal/index/index.htm">
          <van-image
              width="100"
              height="100"
              :src="ossBaseUrl + '/picture/logo/guohui.png'"
        /></a><span>
          黄浦人大官网
        </span>
        </van-col>
        <van-col span="12">
          <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MjM5ODI0OTI0OA==&scene=124#wechat_redirect">
          <van-image
            width="100"
            height="100"
            :src="ossBaseUrl + '/picture/logo/hprdzzh.jpeg'"
          /></a><span>
          上海黄浦
        </span></van-col>
        <van-col span="12">
          <a href="http://rd.huangpuqu.3xmt.com/huangpurendaweb/api/softupdate/downloadClien">
          <van-image
            width="100"
            height="100"
            :src="ossBaseUrl + '/picture/logo/hprdapp.jpeg'"
          /></a><span>
          黄浦人大APP下载
        </span></van-col>
      </van-row>
    </van-tab>
    <van-tab title="各街道" class="list"><van-row>
      <van-col span="12">
        <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI2ODYzMzkwMg==&scene=124#wechat_redirect">
        <van-image
            width="100"
            height="100"
            :src="ossBaseUrl + '/picture/logo1/njdl.jpeg'"
        /></a><span>
          南京东路街道
        </span>
      </van-col>
      <van-col span="12">
        <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzA4NTU1OTM1Mg==&scene=124#wechat_redirect">
          <van-image
          width="100"
          height="100"
          :src="ossBaseUrl + '/picture/logo1/wt.jpeg'"
          /></a><span>
          外滩街道
        </span></van-col>
      <van-col span="12">
        <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzA5MDIyMTMzMw==&scene=124#wechat_redirect">
        <van-image
          width="100"
          height="100"
          :src="ossBaseUrl + '/picture/logo1/rjel.jpeg'"
        /></a><span>
          瑞金二路街道
        </span></van-col>
      <van-col span="12">
        <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzA5MTkyODM5Nw==&scene=124#wechat_redirect">
        <van-image
          width="100"
          height="100"
          :src="ossBaseUrl + '/picture/logo1/hhzl.jpeg'"
        /></a><span>
          淮海中路街道
        </span></van-col>
      <van-col span="12">
        <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI4MDA0NDY3Mw==&scene=124#wechat_redirect">
        <van-image
          width="100"
          height="100"
          :src="ossBaseUrl + '/picture/logo1/yyjd.jpeg'"
        /></a><span>
          豫园街道
        </span></van-col>
      <van-col span="12">
        <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzA5Njk1NzkyMQ==&scene=124#wechat_redirect">
        <van-image
          width="100"
          height="100"
          :src="ossBaseUrl + '/picture/logo1/dpq.jpeg'"
        /></a><span>
          打浦桥街道
        </span></van-col>
      <van-col span="12">
        <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzAwNjQxNDU1Nw==&scene=124#wechat_redirect">
        <van-image
          width="100"
          height="100"
          :src="ossBaseUrl + '/picture/logo1/lxm.jpeg'"
        /></a><span>
          老西门街道
        </span></van-col>
      <van-col span="12">
        <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI4NTEyNzI2MQ==&scene=124#wechat_redirect">
        <van-image
          width="100"
          height="100"
          :src="ossBaseUrl + '/picture/logo1/xdm.jpeg'"
        /></a><span>
          小东门街道
        </span></van-col>
      <van-col span="12">
        <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzA3MjE3MzMzNA==&scene=124#wechat_redirect">
        <van-image
          width="100"
          height="100"
          :src="ossBaseUrl + '/picture/logo1/wlq.jpeg'"
        /></a><span>
          五里桥街道
        </span></van-col>
      <van-col span="12">
        <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI5NzAyMzE0Nw==&scene=124#wechat_redirect">
        <van-image
          width="100"
          height="100"
          :src="ossBaseUrl + '/picture/logo1/bsyl.jpeg'"
        /></a><span>
          半淞园路街道
        </span></van-col>
    </van-row></van-tab>
  </van-tabs>

</template>

<script>
import { ref, onMounted } from 'vue';
import configManager from '../utils/config';

export default {
  setup() {
    const active = ref('');
    const ossBaseUrl = ref('');

    onMounted(async () => {
      ossBaseUrl.value = await configManager.getOssBaseUrl();
    });

    return {
      active,
      ossBaseUrl
    }
  }
}
</script>

<style scoped>
::v-deep(.list img){
  border-radius: 50%;
  display: block;
  margin: 0 auto;
  margin-top: 20px;
}
.list span{
  margin-top: 20px;
  display: block;
}
.list span{
  margin-top: 20px;
  display: block;
}
::v-deep(.van-tab){
  border-bottom: 2px solid #ddd;
}
::v-deep(.van-tabs__nav){
  background-color: #ddd;
}
::v-deep(.van-tabs__line){
  display: none;
}
::v-deep(.van-tab--active){
  background-color: #3e7fff;
  color:#fff;
  position: relative;
}
::v-deep(.van-tab){
  overflow: hidden;
  border:none
}
</style>